<template>
  <section
    class="team"
    data-aos="fade-up"
    data-aos-easing="ease-in-out"
    data-aos-duration="500"
  >
    <!-- 团队成员 -->
    <div class="container">
      <h2 class="section-title">领导成员</h2>
      <div class="description" style="">
        <p style="">一站式的服务让产品落地更有保障</p>
        <p style="">
          我们探索出一套从用户研究、需求分析、产品定位、原型设计、技术开发到测试推广的流程规范,实现了科学的组织管理和项目质量管控。作为一支专业且实战经验丰富的团队，团队拥有超10年的互联网项目设计研发经验。团队成员以80、90后为主，既有蓬勃的朝气，又不乏沉着稳重的老将。
        </p>
      </div>
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <template v-for="(item, index) in resultData.rows" :key="index">
          <div class="col d-flex align-items-stretch" style="">
            <div class="team1">
              <div class="team1-img">
                <img
                  :src="imgUrl(item.contentImg)"
                  class="w-50 h-50 rounded-circle"
                  alt="..."
                  style=""
                />
                <!-- <img
                      :src="
                        require('@/assets/img/blank-profile-picture-973460_640.png')
                      "
                      class="img-fluid rounded-circle"
                      alt="..."
                      style="height: 200px"
                    /> -->
              </div>
              <div class="team1-body" style="">
                <h5 class="team1-person-name" style="">
                  {{ item.contentTitle }}
                </h5>
                <!-- 
                      <p class="team1-person-keyword">
                      {{ item.contentKeyword }}
                    </p> 
                    -->
                <p class="team1-person-description">
                  {{ item.contentDescription }}
                </p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>

  <!-- <a-divider>团队成员</a-divider>
     
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <template v-for="(item, index) in 12" :key="index">
          <div class="col d-flex align-items-stretch">
            <div class="row g-2">
              <div class="col-4">
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                  style="width: 100%"
                />
              </div>
              <div class="col">
                <div>
                  <h4>名字</h4>
                  <div>
                    <span>公司+职位 信息暂缺</span>
                  </div>
                  <div>
                    <span>AntV 是蚂蚁金服全新一代数据可视化解决方案。</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div> -->
</template>

<script>
import { getArticleList, imgUrl } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "Index",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      params: {
        categoryId: "1504496103238721538",
        contentDisplay: "0",
        pageNo: 1,
        pageSize: 10,
      },
      resultData: {
        total: 0,
        rows: [],
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.getList();
    });
    //自定义方法
    const methods = {
      getList() {
        getArticleList(data.params).then((res) => {
          data.resultData = res.data;
          data.resultData.rows = data.resultData.rows.sort(function (a, b) {
            return a.contentSort - b.contentSort;
          });
        });
      },
      pageChange(page, pageSize) {
        data.params.pageNo = page;
        methods.getList();
      },
    };
    return {
      ...refData,
      imgUrl,
    };
  },
};
</script>
<style lang="scss" scoped>
.team {
  .description {
    text-align: center;
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 40px;
  }
}

.team .team1 {
  border: 2px solid #003366;
  border-radius: 10px;

  .team1-img {
    padding: 1rem;
    display: flex;
    justify-content: center;
    vertical-align: middle;
  }
  .team1-body {
    margin: 1rem 0;
    text-align: center;
    width: 100%;

    h5.team1-person-name {
      font-weight: 500;
    }

    p.team1-person-keyword {
      font-size: 1rem;
      font-weight: 300;
      margin-bottom: 10px;
      padding-bottom: 10px;
      position: relative;
    }

    p.team1-person-keyword::after {
      content: "";
      position: absolute;
      display: block;
      width: 40px;
      height: 3px;
      background: #68a4c4;
      bottom: 0;
      left: calc(50% - 20px);
    }

    .team1-person-description {
      font-size: 0.9rem;
    }
  }
}
</style>
